<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">作业</text>
		</view>
    
    <!-- 卡片视图区 -->
    <view class="taskcara">
      <!-- 卡片视图 -->
      <view class="taskList">
        <view class="jiezhitime">
          <text>·</text>
          <text>明天截止</text>
         
        </view>
         <image src="./img/weiwancheng.png" mode="" class="wanchengdu"></image>
       <view class="carabottom">
         <view class="tasktitle">
           <text>练习贝多芬1号奏鸣曲的第一乐章</text>
         </view>
         <view class="buzhitime">
           <text>布置时间：2020-04-20 15:00</text>
         </view>
        <view class="buzhitime">
          <text>完成时间：2020-04-20 15:00</text>
        </view>
         <view class="buzhilaoshi">
           <text>布置老师：小P老师</text>
         </view>
         
         <view class="routerwan">
           <text>去完成</text>
           <image src="./img/youceng.png" mode=""></image>
         </view>
       </view>
      </view>
      
      <!-- 22 -->
      <view class="taskList">
        <view class="jiezhitime">
          <text>·</text>
          <text>明天截止</text>
         
        </view>
         <image src="./img/yiwancheng.png" mode="" class="wanchengdu"></image>
       <view class="carabottom">
         <view class="tasktitle">
           <text>练习贝多芬1号奏鸣曲的第一乐章</text>
         </view>
         <view class="buzhitime">
           <text>布置时间：2020-04-20 15:00</text>
         </view>
        <view class="buzhitime">
          <text>完成时间：2020-04-20 15:00</text>
        </view>
         <view class="buzhilaoshi">
           <text>布置老师：小P老师</text>
         </view>
         
         <view class="routerwan">
           <text>已完成</text>
           <image src="./img/youceng.png" mode=""></image>
         </view>
       </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 260rpx;
}
/* 卡片视图 */
.taskList {
  position: relative;
  width: 690rpx;
  height: 312rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.16);
  border-radius: 20rpx;
  margin-top: 50rpx;
  margin-left: 30rpx;

}
.jiezhitime {
 padding-top: 20rpx;
 padding-left: 24rpx;
}
.jiezhitime text{
  width: 94rpx;
  height: 23rpx;
  font-size: 24rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #FFAF0F;
  line-height: 40rpx;
}
.jiezhitime text:nth-child(1) {
  margin-right: 16rpx;
}
 .wanchengdu{
  position: absolute;
  left: 580rpx;
  bottom: 205rpx;
  width: 100rpx;
  height: 100rpx;
}
.tasktitle {
  margin-top: -12rpx;
}
.tasktitle text {
  font-size: 32rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;

}
.carabottom {
  margin-left: 25rpx;
  margin-top: 30rpx;
}
.buzhitime text {
  font-size: 24rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #777777;
  line-height: 40rpx;
  paddding-top: 22rpx;

}

.buzhilaoshi text {
  font-size: 28rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  line-height: 40rpx;
  margin-top: 21rpx;

}
.routerwan {
  float: right;
  margin-right: 46rpx;
}
.routerwan image{
  width: 12rpx;
  height: 21rpx;
}
.routerwan text {

  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFAF0F;
  line-height: 40rpx;
  padding-right: 8rpx;

}
</style>
